<template>
  <div class="box">
    <el-button type="primary" size="small">
      <router-link class="tiao" to="appointment">返回列表</router-link>
    </el-button>
    <h2>业务详情</h2>
    <div class="list">
      <el-tabs type="border-card">
        <el-table class="table" :data="tableData" style="width: 100%">
          <el-table-column align="center" prop="dan_number" label="单号"></el-table-column>
          <el-table-column align="center" prop="name" label="申请人姓名"></el-table-column>
          <el-table-column prop="business_type" label="业务类别" align="center"></el-table-column>
          <el-table-column align="center" prop="phone" label="电话号码"></el-table-column>
          <el-table-column prop="operate" label="操作" width="250" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="primary" size="small" @click="show(scope.row)">查看详情</el-button> -->
              <el-link type="primary" @click="show(scope.row)" icon="el-icon-document">查看详情</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="prev, pager,next"
            :total="total"
          ></el-pagination>
        </div>
      </el-tabs>
      <!-- <el-dialog
        title="业务内容"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose"
      >
        <div class="hintContent">
          <div class="form-centent">
            <el-form :inline="true" ref="formData" label-width="150px" class="demo-form-inline">
              <div class="forData">
                <h2>申请人信息</h2>
                <div class="forData">
                  <el-form-item
                    class="formItem"
                    :label="item.field"
                    v-for="(item, index) in formData"
                    :key="index"
                  >
                    <el-input
                      :disabled="judeg"
                      @blur="alter([item.content, item.fieldEn])"
                      v-model="item.content"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="forData" v-for="(items, indexs) in formDatas" :key="indexs">
                  <h2>共有人{{ indexs + 1 }}</h2>
                  <el-form-item
                    class="formItem"
                    :label="item.field"
                    v-for="(item, index) in items.contents"
                    :key="index"
                  >
                    <el-input
                      :disabled="judeg"
                      @blur="appAlter([item.content, item.fieldEn, indexs])"
                      v-model="item.content"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="out">返回列表</el-button>
        </span>
      </el-dialog>-->
    </div>
  </div>
</template>
<script>
import union from "@/assets/unionSet.json";
export default {
  data() {
    return {
      // 当前页
      // pageSize: 1,
      pageNum: 1,
      // 每页数据
      // pageNum: 5,
      pageSize: 5,
      total: 0, //分页条数
      msg: {
        id: "",
        url: "",
        classId: "",
      },
      judeg: true,
      dialogVisible: false,
      tableData: [],
      tableDatas: [],
      //业务内容存放数组
      formData: [],
      formDatas: [],
      data: "",
      formContent: [
        {
          field: "申请人名称(中文)",
          content: "腾讯科技有限公司",
        },
        {
          field: "申请人名称(中文)",
          content: "腾讯科技有限公司",
        },
      ],
    };
  },
  methods: {
    show(item) {
      // console.log(item);
      // this.msg.id = item.dan_number;
      // this.msg.url = item.url;
      // this.msg.classId = item.modelId;
      this.dialogVisible = true;
      for (let i = 0; i <= 25; i++) {
        if (i == item.classId) {
          item.classId == 23
            ? (this.path = "businessForm" + 24)
            : (this.path = "businessForm" + i);
        }
      }
      this.$router.push({
        path: this.path,
        query: { id: item.id },
      });
      // this.$http
      //   .get(
      //     `/trademark/proPublic/getBus/${item.dan_number}`
      //     // , {
      //     //   params: {
      //     //     // classId: 3,
      //     //     certId:this.msg.id
      //     //   },
      //     // }
      //   )
      //   .then((result) => {
      //     //console.log(result.data.data.list[0])
      //     //console.log("-----------------------------")
      //     // let append;
      //     // let unions = union;
      //     // if (result.data.data.append) {
      //     let dataObj = result.data.data.list[0];
      //     if (dataObj) {
      //       // this.append = result.data.data.append;
      //       this.append.forEach((item, indexs) => {
      //         this.formDatas.push({
      //           extra: item.id,
      //           contents: [],
      //         });
      //         for (let key in item) {
      //           for (let index in unions) {
      //             if (index == key) {
      //               this.formDatas[indexs].contents.push({
      //                 fieldEn: key,
      //                 field: unions[index],
      //                 content: item[key],
      //               });
      //             }
      //           }
      //         }
      //       });
      //     }
      //     this.data = result.data.data.data;
      //     for (let key in this.data) {
      //       for (let index in unions) {
      //         if (index == key) {
      //           this.formData.push({
      //             fieldEn: key,
      //             field: unions[index],
      //             content: this.data[key],
      //           });
      //         }
      //       }
      //     }
      //   });
    },
    out() {
      this.dialogVisible = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      // //console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // //console.log(`当前页: ${val}`);
      this.pageNum = val;
    },
  },
  mounted() {
    this.$http
      .get(`/trademark/order/findByOrderId`, {
        params: {
          // orderId: this.$route.query.orderId,
          orderId: 41,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        },
      })
      .then((result) => {
        console.log(result);
        // console.log(result.data.data.total);
        if (Number(result.data.data.total)) {
          this.total = Number(result.data.data.total);
        }
        console.log(this.total);
        let list = result.data.data.data;
        // console.log(list);
        if (list) {
          list.forEach((item, index) => {
            this.tableData.push({
              // idx: index,
              dan_number: item.certId,
              name: item.appName,
              phone: item.phone,
              business_type: item.name,
              id: item.id,
              classId: item.classId,
              // url: item.findById,
              // upUrl: item.updateById,
              // modelId: item.modelId,
            });
          });
        }
      });
  },
};
</script>
<style lang="less" scoped>
.box {
  padding: 20px;
  > .el-button {
    display: block;
  }
  .tiao {
    color: #fff;
    text-decoration: none;
  }
  h2 {
    margin: 20px;
    font-size: 20px;
    text-align: left;
  }
  .paging {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .hintContent {
    width: 800px;
    padding: 20px;
    .tiao {
      color: #fff;
      text-decoration: none;
    }
    .btn {
      text-align: left;
      .el-button ~ .el-button {
        margin: 0 40px;
      }
    }
    .text {
      position: relative;
      .hint {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        width: 300px;
        height: 100%;
        text-align: left;
        transform: translateX(110%);
      }
    }
    .form-centent {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .el-form {
        margin: 10px 0;
      }
      .el-input/deep/.el-input__inner {
        border: none !important;
      }
      .text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        .el-form-item/deep/.el-textarea__inner {
          width: 500px;
        }
      }
    }
  }
}
</style>
